<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>餐评未点评明细</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:10px;">
<!--        <SearchModle dataKey="MultipleteacherModle" @searchFn="searchFn"></SearchModle>-->
        <el-table :data="arryList"
                  height="400"
                  :stripe="tableStyle.tableStripe"
                  :border="tableStyle.tableBorder"
                  tooltip-effect="dark"
                  ref="multipleTable">
          <el-table-column label="头像"align="center">
            <template slot-scope="scope">
              <!--              <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
              <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="realname" align="center"></el-table-column>
          <el-table-column label="班级" align="center">
            <template slot-scope="scope">
              {{scope.row.classes?scope.row.classes.class_name:''}}
            </template>
          </el-table-column>
        </el-table>
<!--        <el-pagination-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :current-page="page.pageindex"-->
<!--            :total="page.total"-->
<!--            :page-size="page.pagesize"-->
<!--            @current-change="handleSizeChange">-->
<!--        </el-pagination>-->
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
<!--        <el-button type="primary" size="small" @click="submitFormAdd()">确认并保存</el-button>-->
      </div>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'

export default {
  name: 'studentMultiple',
  props: ['visible', 'userlist', 'commonlist'],
  data() {
    return {
      dialogVisible: this.visible,
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        p: '',
        name: ''
      },
      arryList: [],
      applyBookBox: {}, // 选中人员信息
      // 搜索
      searchForm: {}
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('收到的内容：', this.userlist, this.commonlist)
        // 全员userlist ， 评价 commonlist
        // this.InitFn()
        let a_ = []
        for(let item of this.commonlist){
          a_.push(item.id)
        }
        let list_ = []
        for(let item of this.userlist){
          if(a_.indexOf(item.id)===-1){
            list_.push(item)
          }
        }
        this.arryList = JSON.parse(JSON.stringify(list_))
      }
    }
  },
  created() {
  },
  methods: {
    // 搜索
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    submitCheckFn() {
      console.log('applyBookBox:', this.applyBookBox)
      if (JSON.stringify(this.applyBookBox) === '{}') {
        this.$message({
          message: '选择教职工',
          type: 'error'
        })
      } else {
        this.$emit('studentFn', this.applyBookBox)
        this.dialogVisible = false
      }
    },
    // 提交数据
    async submitFormAdd() {
      console.log('applyBookBox:', this.applyBookBox)
      if (JSON.stringify(this.applyBookBox) === '{}') {
        this.$message({
          message: '请填特定的学生',
          type: 'error'
        })
      } else {
        this.$emit('studentFn', this.applyBookBox)
        this.closePOpup()
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
</style>
